import React, { Component } from 'react';
import { Toast } from 'antd-mobile';
import './style/huodongzhuanqu.css'

class HuoDongZhuanQu extends Component {

    constructor(props) {
        super(props);
        this.state = {
            signed: localStorage.getItem('signed') === new Date().getDay().toString()
        }

    }

    goback = () => {
        this.props.history.goBack();
    }

    //签到
    goSigned = () => {
        if (!this.state.signed) {
            this.setState({
                signed: true
            }, () => {
                const v = localStorage.getItem('signed');
                if (v !== new Date().getDay().toString()) {
                    localStorage.setItem('signed', new Date().getDay().toString())
                }
                Toast.info('签到成功', 2)
            })
        }

    }

    goChouJiang = () => {
        this.props.history.push({ pathname: './choujiang' })
    }

    render() {
        const { signed } = this.state
        return (<div className='huodongzhuanqu'>
            <div className='huodongzhuanquNavBar'>
                <div onClick={this.goback} className='huodongzhuanquNavBarArrow'>
                    <img alt='' src={require('./img/huodongzhuanqu/left.png')} ></img>
                </div>
                <span>活动专区</span>
                <span></span>
            </div>
            <div className='huodongzhuanquScoll'>
                <div className='huodongzhuanquScollQianDao'>
                    <div className='huodongzhuanquScollQianDaoDetale'>
                        {
                            signed ? <span className='huodongzhuanquScollQianDaoDetaleSpan1'>
                                <span style={{ marginRight: "1rem" }}>签到成功</span>
                                <span style={{ color: "#999", fontSize: "1.3rem" }}>恭喜您，签到成功！</span>
                            </span> : <span className='huodongzhuanquScollQianDaoDetaleSpan1'>签到送好礼</span>
                        }


                        {
                            signed ? <span style={{ color: "#F8833E" }} className='huodongzhuanquScollQianDaoDetaleSpan2'>获得5元现金优惠券，赶快去使用吧！</span> : <span className='huodongzhuanquScollQianDaoDetaleSpan2'>每日签到赠送红包，赶快去签到吧！</span>
                        }


                        <span onClick={this.goSigned} className={`${this.state.signed ? 'signed' : ''}huodongzhuanquScollQianDaoDetaleSpan3`}>{this.state.signed ? '已签到' : "去签到"}</span>
                    </div>
                    <img alt='' src={require('./img/huodongzhuanqu/icon1.png')} ></img>
                </div>
                <div className='huodongzhuanquScollQianDao'>
                    <div className='huodongzhuanquScollQianDaoDetale'>
                        <span className='huodongzhuanquScollQianDaoDetaleSpan1'>免费抽大奖</span>
                        <span className='huodongzhuanquScollQianDaoDetaleSpan2'>每天免费一次抽奖，多重好礼等你拿！</span>
                        <span onClick={this.goChouJiang} className='huodongzhuanquScollQianDaoDetaleSpan3'>去抽奖</span>
                    </div>
                    <img alt='' src={require('./img/huodongzhuanqu/icon2.png')} ></img>
                </div>
            </div>
        </div>)
    }
}

export default HuoDongZhuanQu;